/*
 * @Author: zhushixian
 * @Date: 2020-7-22
 * @Last Modified by:
 * @Last Modified time:
 *
 */
 <template>

    <div id="dueFundsList">
        <page-title :title="ruleTitle" :clickRightButton="clickExplain"  rightButton="说明" :backUrl="backUrl"></page-title>
        <div class="midContent" ref="ele">
            <div id="calender">
                <div class="calendarTop">
                    <div class="year-box">
                        <div class="inside-year-box media_font_adaptation_14px">
                            2020
                        </div>
                    </div>
                    <div id="topNav" class="month-box swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in monthArr"  :class="{'active': index === selected }" htmdEvt="changeMonth_btn"  @click="choose(index)">
                                <div class="bigDiv">
                                    <span class="detailMonth media_font_adaptation_14px">{{item}}</span><span class="detailNum media_font_adaptation_10px">月</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Calendar
                    ref="Calendar"
                    v-on:choseDay="clickDay"
                    :markDateMore ="arr"
                    :sundayStart="true"
                    :textTop="dayArr"
                ></Calendar>
                <div class="calendarBot">
                    <span class="orangePoint"></span>&nbsp;&nbsp;<span class="media_font_adaptation_12px">来自持仓项目</span>
                    <span class="bluePoint"></span>&nbsp;&nbsp;<span class="media_font_adaptation_12px">来自跟踪记录</span>
                </div>
            </div>


            <!-- 用于滑动吸顶的tab -->
            <div class="fundsInfo"  :class="{iosXd: this.iosXd, androidXd: this.androidXd}" >
                <div ref="tabwrapTop"></div>
                <div class="top-box clearfix">
                    <div class="top-child-box">
                        <div class="gray-font media_font_adaptation_12px">{{monthOrDay}}到期资金(笔)</div>
                        <div class="orange-font media_font_adaptation_17px">{{queryTotalInfo.totalCount}}</div>
                    </div>
                    <div class="top-child-box">
                        <div class="gray-font media_font_adaptation_12px">总计(约)</div>
                        <div class="orange-font centerFont media_font_adaptation_17px">{{queryTotalInfo.fundsSum}}</div>
                    </div>
                </div>
                <div class="bot-box media_padding_adaptation_32px clearfix">
                    <div class="bot-child-box">
                        <span class="gray-font media_font_adaptation_12px">项目到期</span>
                        <span class="sigMon media_font_adaptation_12px">{{queryTotalInfo.projectNum}}笔</span>
                    </div>
                    <div class="bot-child-box">
                        <span class="gray-font media_font_adaptation_12px">付息/分红</span>
                        <span class="sigMon media_font_adaptation_12px">{{queryTotalInfo.interestNum}}笔</span>
                    </div>
                    <div class="bot-child-box">
                        <span class="gray-font media_font_adaptation_12px">资金到账</span>
                        <span class="sigMon media_font_adaptation_12px">{{queryTotalInfo.investNum}}笔</span>
                    </div>
                </div>

            </div>
            <!-- 吸顶结束 -->

            <div class="listWrap clearfix " ref="complateTabBottom" :style="liStyle ? 'margin-top:4.4rem': ''">
                <!-- 来自持仓记录 -->
                <!--<mt-loadmore id='refresh' :top-method="loadTop" :bottom-all-loaded="allLoaded" ref="allLoadMore" :bottomDistance="30" v-if="!noData">-->
                    <mt-loadmore id='refresh'  :bottom-all-loaded="allLoaded" ref="allLoadMore" :bottomDistance="30" v-if="!noData">

                    <ul class="RecordList clearfix"
                        v-infinite-scroll="loadMore"
                        infinite-scroll-disabled="busy"
                        infinite-scroll-immediate-check="true"
                        infinite-scroll-distance="20">
                        <!--子项-->
                        <li class="RecordItem clearfix"  htmdEvt="dueFundsDetail_btn" v-for="item in getData" @click="gotoDetail(item)">
                            <div class="lidivT" >
                                <span class="sigName media_font_adaptation_15px">{{item.customerName}}</span>
                                <span class="sigMon marg-l-20 media_font_adaptation_13px">{{item.expireType == 0?"本金":(item.expireType == 1?"预估":"自填")}}</span>
                                <span class="count media_font_adaptation_13px">{{item.expireValue}}</span>
                                <span class="media_font_adaptation_10px" :class="[item.expireType == 2?'blue-icon':'orange-icon']">{{item.expireType ==2? "来自跟踪记录":"来自持仓"}}</span>
                            </div>
                            <!-- <div class="orangeLine"></div> -->
                            <div class="lidivB">
                                <div class="mean-box clearfix">
                                    <span class="sigMon media_font_adaptation_13px">
                                        {{item.projectEndDate}}
                                    </span>
                                    <span class="sigPro media_font_adaptation_13px" :class="[item.expireType == 2?'gray-count':'count']">
                                       {{item.expireType ==0? "项目到期":(item.expireType == 1?"付息/分红":"资金到账")}}
                                    </span>
                                </div>
                                <div class="gray-font media_font_adaptation_10px"  >{{item.projectName}}
                                </div>
                            </div>
                        </li>


                    </ul>
                    <noMore v-if="noMore && noMoreDouble"></noMore>
                </mt-loadmore>



                <!--显示加载中状态-->
                <div class="loadingBox" v-if="loading">
                    <mt-spinner type="snake" class="loading-more"  color="#FF8637"></mt-spinner>
                </div>
            </div>

        </div>
        <!-- 暂无数据组件 -->
        <div class="nodata" v-if="noData">
            <newNoData :imgTop='imgTop' :tipTop='tipTop' :tipName='tipName' ></newNoData>
        </div>

    </div>

</template>

<script  type="text/javascript">
import './dueFundsList.less'

//引入日历插件
// import Calendar from 'vue-calendar-component'
import Calendar from '@src/common/components/calendar/calendar.vue'
// import '@src/common/less/vue-calendar-component.less'
import '@src/common/components/swiper/css/swiper.css'
import Swiper from '@src/common/components/swiper/js/swiper.js'
// import Swiper from 'swiper'
import noMore from '@src/common/noMore/noMore'
import newNoData from '@src/common/newNoData/newNoData';
import pageTitle from '@src/common/pageTitle/pageTitle'
export default {
    name: "dueFundsList",
    components: {newNoData, pageTitle,Calendar,noMore},
    data(){
        return {
            imgTop: 'top: 3.35rem', // 新暂无数据组件图片的定位高度
            tipTop: 'top: 8.6rem',  // 新暂无数据组件文字的定位高度
            tipName: '暂无数据', // 新暂无数据组件的文案
            ruleTitle: '到期资金管理', // pageTitle中间部分显示
            backUrl: '', //传给pageTitle组件，返回上一页的标识
            //日历插件的星期，必传，否则插件从星期一开始
            dayArr: ['日','一', '二', '三', '四', '五', '六'], // 星期渲染
            monthArr: ['1','2', '3', '4', '5', '6', '7','8','9','10', '11', '12'], // 月份渲染
            noData: false, //不显示暂无数据
            loading: false, // 是否显示加载中状态
            allLoaded: false, //可进行上拉
            iosXd: false, //粘性定位，用于ios设备
            androidXd: false, //粘性定位，用于ios除外设备
            liStyle: false, //控制列表项与定位项的位置
            liHeight: '', //当定位项距离顶部一定距离时，与列表项衔接
            noMore: false, //分页没有更多数据展示
            selected: new Date().getMonth(), // 控控选中月份为当前月份
            mySwiper:null, // 月份切换插件
            arr:[],
            nopage: false, // 没有下一页判断
            type: '',// 判断加载类型，是下拉刷新亦或上拉加载
            busy: false, // 用于无限循环组件是否可以使用
            queryTotalInfo:{
                fundsSum:'0.00万', //金额总计
                projectNum:0, //项目到期数量
                interestNum:0, //分红/利息数量
                investNum:0 ,//投资金额数量
                totalCount:0
            },
            sendData: {
                month:new Date().getMonth()+1,//当前月份
                day:'',//具体某一天（不填返回整月列表信息，填返回当日列表信息）
                pageNum:1,//页码默认1
                pageSize:20,//默认20
            },
            getData:[] ,//接口返回数据数组
            monthOrDay:'本月',//显示本月
            debounceInit: null, //用于防止多次跳转页面
            clientHeight:'',
            wholePage: '',
            noMoreDouble:'',
        };
    },
    created() {
        this.loadTop();
        this.getCalendarInfo()
        this.getTotalData()
    },
    mounted(){

        //控制补位日期不可点击
        this.$refs.Calendar.PreMonth=()=>{};
        this.$refs.Calendar.NextMonth=()=>{};

        //满一屏才展示nomore
        this.clientHeight = `${document.documentElement.clientHeight}`

        // 非ios设备监听滚动事件
        window.addEventListener('scroll', this.handleScroll, true)

        //因暂未写接口，先把loading关掉
        // this.$parent.changeLoading(false)

        //判断苹果和安卓
        if( window.appIsIOS ){
            this.iosXd = true
        }

        //初始化swiper插件
        this.mySwiper = new Swiper('#topNav', {
            freeMode: true,
            freeModeMomentumRatio: 0.5,
            slidesPerView: 'auto',
        });

        // 初始化页面时的月份定位
        this.initTranslate()
    },
    watch: {
        // 如果 `wholePage` 发生改变，这个函数就会运行
        wholePage: function () {
           this.noMoreDouble =  this.wholePage >= this.clientHeight
        }
    },
    methods: {

        // 点击选择月份调用
        choose (index) {
            setTimeout(()=>{
                this.monthOrDay = "本月"
            })
            this.selected = index
            this.initTranslate()
            //手动控制插件展示对应月份，并定位日期
            setTimeout(() => {
                this.$refs.Calendar.ChoseMonth(`2020/${index+1}/1`,false)
            },100)
            //
            // //调接口
            this.sendData.month = index+1
            this.sendData.day = ''
            this.sendData.pageNum =1
            this.loadTop()
            this.getCalendarInfo()
            this.getTotalData()

        },
        //选中某天
        clickDay(data) {
            this.monthOrDay = "当日"
            //调接口
            this.sendData.month = new Date(data).getMonth()+1
            this.sendData.day = new Date(data).getDate()
            this.sendData.pageNum = 1
            this.loadTop()
            this.getTotalData()

        },

        // 选中月份定位在 页面中间显示
        initTranslate(){

            let swiperWidth = this.mySwiper.width
            let maxTranslate = this.mySwiper.maxTranslate();
            let maxWidth = -maxTranslate + swiperWidth / 2
            let slide = this.mySwiper.slides[this.selected]
            let slideLeft = slide.offsetLeft
            let slideWidth = slide.clientWidth
            let slideCenter = slideLeft + slideWidth / 2
            this.mySwiper.setTransition(300)
            if (slideCenter < swiperWidth / 2) {
                this.mySwiper.setTranslate(0)
            } else if (slideCenter > maxWidth) {
                this.mySwiper.setTranslate(maxTranslate)
            } else {
                let nowTlanslate = slideCenter - swiperWidth / 2
                this.mySwiper.setTranslate(-nowTlanslate)
            }
        },

        // 滚动监听事件
        handleScroll(){
            //判断苹果和安卓
            if( !window.appIsIOS ){
                //安卓手机，可以使用这种办法
                this.liHeight = this.$refs.complateTabBottom.getBoundingClientRect().top
                if (this.$refs.tabwrapTop.getBoundingClientRect().top <= 237) {
                    this.liStyle = true
                    this.androidXd = true
                }
                if(this.liHeight > 192){
                    this.liStyle = false
                    this.androidXd = false
                }
            }
        },

        // 上拉加载
        loadMore() {
            this.sendData.pageNum++;
            this.busy = true
            this.$parent.changeLoading(false)
            this.loading = true
            if(!this.nopage) {
                this.type = 'loadMore'
                this.getListData('loadMore')
            }else{
                this.noMore = true
                this.loading = false
                return false
            }

        },
        // 下拉刷新方法
        loadTop(){
            this.sendData.pageNum = 1;
            this.getListData('loadTop');

        },
        getCalendarInfo(){
            this.$parent.changeLoading(true)
            this.$axiosHttp.http ({
                method: "POST",
                url: apiUrl.queryCalenderInfoApi,
                params:{
                    month: this.sendData.month,
                }
            },(res)=>{
                //成功拿到数据
                const {data:{data}} = res
                this.arr = data.map(item => {
                    item.curDt = this.$utils.momentFmtYmd3(item.curDt)
                    let chicang = item.projectFlag == 1 || item.interestFlag == 1 ? true : false
                    let genzong = item.investFlag == 1 ? true : false
                    return {date:item.curDt, markLeft: genzong, markRight: chicang}
                })
            },(res) => {
                // 接口报错处理
                this.$toast(res.data.message)
                this.noMore = true
                this.nopage = true
                this.loading = false
            })
        },
        //获取总额数据
        getTotalData(){
            this.$parent.changeLoading(true)
            this.$axiosHttp.http ({
                method: "post",
                url: apiUrl.queryTotalInfoApi,
                params:{
                    month: this.sendData.month,
                    day : this.sendData.day,
                }
            },(res)=>{
                //成功拿到数据
                const {data:{data}} =res
                this.queryTotalInfo = data

            },(res) => {
                // 接口报错处理
                this.$toast(res.data.message)
            }, (res) => {
                // 接口返回1000无数据时的处理
                // 说明员工分页时出现了无数据情况
                let queryTotalInfo = {
                    fundsSum:'0.00万', //金额总计
                    projectNum:0, //项目到期数量
                    interestNum:0, //分红/利息数量
                    investNum:0 ,//投资金额数量
                    totalCount:0
                }
                this.queryTotalInfo = queryTotalInfo
            })
        },



        // 初始化数据
        getListData(type){
            if(type == 'loadMore') {
                this.loading = true
                this.$parent.changeLoading(false)
            }else {
                this.$parent.changeLoading(true)
            }
            let params = {
                pageNum: this.sendData.pageNum,
                pageSize: this.sendData.pageSize,
                month: this.sendData.month,
                day : this.sendData.day,
            }
            this.$axiosHttp.http({
                method: "post",
                url: apiUrl.queryFundsListApi,
                params:params,
            }, (res) => {
                //接口请求成功
                this.noData = false
                this.loading = false
                let {data:{data}}= res

                if(data.list == null || data.list.length== 0 ){
                    this.noData = true; //显示暂无数据
                    this.allLoaded = true; //不允许下拉加载
                }else {
                    if (type == 'loadTop') { //代表是下拉刷新
                        this.nopage = false
                        this.noMore = false
                        this.getData = data.list
                        this.type = 'loadTop'
                        if (data.list.length < 20) {
                            this.nopage = true
                            this.busy = true
                            this.loading = false
                        }
                        this.getData = data.list
                    } else { //代表是上拉加载
                        this.loading = true
                        this.nopage = false
                        this.type = 'loadMore'
                        if (this.sendData.pageNum >= data.pages) {
                            this.getData = this.getData.concat(data.list);
                            this.nopage = true
                            this.noMore = true
                            this.noData = false
                        } else {
                            this.getData = this.getData.concat(data.list);
                        }
                    }
                    this.busy = false
                    this.loading = false
                    this.$nextTick(()=>{
                        this.wholePage = this.$refs.ele.offsetHeight
                    })
                }
            }, (res) => {
                // 接口报错处理
                this.$toast(res.data.message)
            }, (res) => {
                // 接口返回1000无数据时的处理
                // 说明员工分页时出现了无数据情况
                if(type == 'loadTop'){ //说明没有数据
                    this.noData = true
                    this.getData = []
                    this.noMore = false
                }
                else{
                    this.noData = false
                    this.noMore = true
                    this.nopage = true
                    this.loading = false
                }
            })
        },
        //点击右侧说明按钮执行的操作
        clickExplain() {
            //跳转到说明页
            this.$router.push({path: '/lgbCdn/dueFunds/dueFundsList/dueFundsRules.html'})
        },
        // 跳转到详情
        gotoDetail (item) {
            this.$router.push({path: `/lgbCdn/dueFunds/dueFundsList/dueFundsDetail.html?id=${item.id}`})

        },
    }
}


</script>
